<template>
  <MainLayout>
    <div class="courses-page">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-background"></div>
        <div class="header-content">
          <div class="header-left">
            <div class="header-icon">
              <el-icon size="32"><Reading /></el-icon>
            </div>
            <div class="header-text">
              <h1>{{ authStore.hasRole('admin') ? '课程管理' : '我的课程' }}</h1>
              <p>{{ authStore.hasRole('admin') ? '管理和查看所有课程信息，包括课程设置、班级分配和教师安排' : '查看我教授的课程，管理课程内容和学生' }}</p>
            </div>
          </div>
          <div class="header-actions" v-if="authStore.hasRole('admin')">
            <el-button 
              type="primary" 
              size="large" 
              @click="showCreateDialog = true"
              class="action-btn primary-btn"
            >
              <el-icon><Plus /></el-icon>
              创建课程
            </el-button>
          </div>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon courses-icon">
                <el-icon size="24"><Reading /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ courses.length }}</div>
                <div class="stat-label">总课程数</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon classes-icon">
                <el-icon size="24"><School /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ totalClasses }}</div>
                <div class="stat-label">涉及班级</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon teachers-icon">
                <el-icon size="24"><UserFilled /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ uniqueTeachers }}</div>
                <div class="stat-label">授课教师</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon students-icon">
                <el-icon size="24"><User /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ totalStudents }}</div>
                <div class="stat-label">总学生数</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 课程列表 -->
      <el-card class="courses-list-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon size="20" class="header-icon"><List /></el-icon>
              <span class="header-title">{{ authStore.hasRole('admin') ? '课程列表' : '我的课程列表' }}</span>
              <el-tag type="info" size="small">{{ courses.length }} 门课程</el-tag>
            </div>
            <div class="header-right">
              <el-input
                v-model="searchQuery"
                placeholder="搜索课程名称或描述"
                class="search-input"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" text @click="fetchCourses" class="refresh-btn">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>

        <el-table 
          :data="filteredCourses" 
          style="width: 100%"
          class="courses-table"
          :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
          stripe
        >
          <el-table-column prop="id" label="ID" width="80" align="center">
            <template #default="{ row }">
              <el-tag size="small" type="info">#{{ row.id }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="课程名称" min-width="200">
            <template #default="{ row }">
              <div class="course-info">
                <div class="course-icon">
                  <el-icon size="20"><Reading /></el-icon>
                </div>
                <div class="course-details">
                  <div class="course-name">{{ row.name }}</div>
                  <div class="course-code">CS{{ row.id.toString().padStart(3, '0') }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="250">
            <template #default="{ row }">
              <div class="course-description">
                <el-icon size="16" class="description-icon"><Document /></el-icon>
                <span class="description-text">{{ row.description }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="teacher" label="授课教师" width="140">
            <template #default="{ row }">
              <div class="teacher-info">
                <div class="teacher-avatar">
                  <el-icon size="16"><UserFilled /></el-icon>
                </div>
                <span class="teacher-name">{{ row.teacher }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="班级" width="200">
            <template #default="scope">
              <div class="classes-cell">
                <el-tag 
                  v-for="classId in scope.row.classIds" 
                  :key="classId"
                  size="small"
                  type="primary"
                  effect="light"
                  class="class-tag"
                >
                  <el-icon size="12"><School /></el-icon>
                  {{ getClassName(classId) }}
                </el-tag>
                <el-tag 
                  v-if="!scope.row.classIds || scope.row.classIds.length === 0"
                  size="small"
                  type="info"
                  effect="plain"
                >
                  未分配班级
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="student_count" label="学生数量" width="120" align="center">
            <template #default="{ row }">
              <div class="student-count">
                <el-icon size="16" class="student-icon"><User /></el-icon>
                <span class="count-number">{{ row.student_count }}</span>
                <span class="count-label">人</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="180">
            <template #default="{ row }">
              <div class="date-cell">
                <el-icon size="16" class="date-icon"><Calendar /></el-icon>
                <span>{{ formatDate(row.created_at) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" type="primary" text @click="viewCourse(scope.row)" class="action-btn">
                  <el-icon><View /></el-icon>
                  查看
                </el-button>
                <el-button 
                  v-if="authStore.hasRole('admin')" 
                  size="small" 
                  type="warning" 
                  text 
                  @click="editCourse(scope.row)"
                  class="action-btn"
                >
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
                <el-button 
                  v-if="authStore.hasRole('admin')" 
                  size="small" 
                  type="danger" 
                  text 
                  @click="deleteCourse(scope.row)"
                  class="action-btn"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div v-if="filteredCourses.length === 0" class="empty-state">
          <el-empty description="暂无课程数据" :image-size="120">
            <el-button v-if="authStore.hasRole('admin')" type="primary" @click="showCreateDialog = true">创建第一个课程</el-button>
          </el-empty>
        </div>
      </el-card>

      <!-- 创建/编辑课程对话框 -->
      <el-dialog 
        v-model="showCreateDialog" 
        :title="editingCourse ? '编辑课程' : '创建课程'"
        width="700px"
        class="course-dialog"
        :close-on-click-modal="false"
      >
        <div class="dialog-header">
          <el-icon size="24" class="dialog-icon">
            <component :is="editingCourse ? 'Edit' : 'Plus'" />
          </el-icon>
          <span>{{ editingCourse ? '编辑课程信息' : '创建新的课程' }}</span>
        </div>
        
        <el-form :model="courseForm" label-width="100px" class="course-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="课程名称" required>
                <el-input 
                  v-model="courseForm.name" 
                  placeholder="请输入课程名称"
                  size="large"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><Reading /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授课教师" required>
                <el-select
                  v-model="courseForm.teacherId"
                  placeholder="请选择授课教师"
                  style="width: 100%"
                  size="large"
                  class="form-select"
                >
                  <el-option
                    v-for="teacher in teachers"
                    :key="teacher.id"
                    :label="teacher.name"
                    :value="teacher.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="课程描述" required>
            <el-input 
              v-model="courseForm.description" 
              type="textarea" 
              :rows="4"
              placeholder="请输入课程描述，包括课程目标、主要内容等"
              class="form-textarea"
            />
          </el-form-item>
          
          <el-form-item label="选择班级">
            <el-select
              v-model="courseForm.classIds"
              multiple
              placeholder="请选择班级（可多选）"
              style="width: 100%"
              size="large"
              class="form-select"
            >
              <el-option
                v-for="classItem in classes"
                :key="classItem.id"
                :label="classItem.name"
                :value="classItem.id"
              />
            </el-select>
            <div class="form-help">
              <el-icon size="16"><InfoFilled /></el-icon>
              <span>选择该课程面向的班级，未选择则暂不分配</span>
            </div>
          </el-form-item>
        </el-form>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showCreateDialog = false" size="large">取消</el-button>
            <el-button 
              type="primary" 
              @click="saveCourse" 
              size="large"
              class="submit-btn"
            >
              <el-icon><Check /></el-icon>
              {{ editingCourse ? '更新课程' : '创建课程' }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </MainLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Reading, 
  Plus, 
  Edit, 
  Delete, 
  View, 
  School, 
  UserFilled, 
  User, 
  Document, 
  Calendar, 
  List, 
  Search, 
  Refresh, 
  Check, 
  InfoFilled 
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import api from '@/api'
import MainLayout from '@/layouts/MainLayout.vue'

const authStore = useAuthStore()

// 数据
const courses = ref([])
const classes = ref([])
const teachers = ref([])
const showCreateDialog = ref(false)
const editingCourse = ref(null)
const searchQuery = ref('')
const courseForm = ref({
  name: '',
  description: '',
  classIds: [],
  teacherId: ''
})

// 计算属性
const filteredCourses = computed(() => {
  if (!searchQuery.value) return courses.value
  
  const query = searchQuery.value.toLowerCase()
  return courses.value.filter(course => 
    course.name.toLowerCase().includes(query) ||
    course.description.toLowerCase().includes(query) ||
    course.teacher.toLowerCase().includes(query)
  )
})

const totalClasses = computed(() => {
  const allClassIds = new Set()
  courses.value.forEach(course => {
    if (course.classIds) {
      course.classIds.forEach(id => allClassIds.add(id))
    }
  })
  return allClassIds.size
})

const uniqueTeachers = computed(() => {
  const teacherIds = new Set()
  courses.value.forEach(course => {
    if (course.teacherId) {
      teacherIds.add(course.teacherId)
    }
  })
  return teacherIds.size
})

const totalStudents = computed(() => {
  return courses.value.reduce((total, course) => {
    return total + (course.student_count || 0)
  }, 0)
})

// 获取课程列表
const fetchCourses = async () => {
  try {
    // 这里可以调用后端API获取课程列表
    // 暂时使用模拟数据
    const allCourses = [
      {
        id: 1,
        name: 'Python编程基础',
        description: '学习Python编程语言的基础知识和应用，包括语法、数据结构、面向对象编程等核心概念',
        teacher: '张老师',
        teacherId: '1',
        classIds: ['1', '2'],
        student_count: 25,
        created_at: '2024-01-01 10:00:00'
      },
      {
        id: 2,
        name: '数据结构与算法',
        description: '深入学习数据结构和算法的设计与实现，掌握常见算法思想和优化技巧',
        teacher: '李老师',
        teacherId: '2',
        classIds: ['1', '3'],
        student_count: 18,
        created_at: '2024-01-02 14:30:00'
      },
      {
        id: 3,
        name: 'Web开发技术',
        description: '学习现代Web开发技术和框架，包括前端、后端和数据库的完整开发流程',
        teacher: '王老师',
        teacherId: '3',
        classIds: ['2', '4'],
        student_count: 32,
        created_at: '2024-01-03 09:15:00'
      },
      {
        id: 4,
        name: '数据库系统原理',
        description: '学习数据库系统的核心原理，包括关系模型、SQL语言、事务处理等',
        teacher: '赵老师',
        teacherId: '4',
        classIds: ['1', '4'],
        student_count: 22,
        created_at: '2024-01-04 16:45:00'
      }
    ]

    // 根据用户角色过滤课程
    if (authStore.hasRole('admin')) {
      // 管理员可以看到所有课程
      courses.value = allCourses
    } else if (authStore.hasRole('teacher')) {
      // 教师只能看到自己教授的课程
      const currentTeacherId = authStore.user?.id || '1' // 假设当前教师ID为1
      courses.value = allCourses.filter(course => course.teacherId === currentTeacherId)
    } else {
      // 学生可以看到所有课程（或者根据选课情况过滤）
      courses.value = allCourses
    }
  } catch (error) {
    console.error('获取课程列表失败:', error)
    ElMessage.error('获取课程列表失败')
  }
}

// 获取班级列表
const fetchClasses = async () => {
  try {
    // 模拟班级数据
    classes.value = [
      { id: '1', name: '计算机科学1班' },
      { id: '2', name: '计算机科学2班' },
      { id: '3', name: '软件工程1班' },
      { id: '4', name: '软件工程2班' },
      { id: '5', name: '人工智能1班' },
      { id: '6', name: '网络工程1班' }
    ]
  } catch (error) {
    console.error('获取班级列表失败:', error)
    ElMessage.error('获取班级列表失败')
  }
}

// 获取教师列表
const fetchTeachers = async () => {
  try {
    // 模拟教师数据
    teachers.value = [
      { id: '1', name: '张老师' },
      { id: '2', name: '李老师' },
      { id: '3', name: '王老师' },
      { id: '4', name: '赵老师' },
      { id: '5', name: '陈老师' },
      { id: '6', name: '刘老师' }
    ]
  } catch (error) {
    console.error('获取教师列表失败:', error)
    ElMessage.error('获取教师列表失败')
  }
}

// 根据班级ID获取班级名称
const getClassName = (classId) => {
  const classItem = classes.value.find(c => c.id === classId)
  return classItem ? classItem.name : classId
}

// 格式化日期
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

// 查看课程
const viewCourse = (course) => {
  ElMessage.info(`查看课程: ${course.name}`)
  // 这里可以跳转到课程详情页面
}

// 编辑课程
const editCourse = (course) => {
  editingCourse.value = course
  courseForm.value = {
    name: course.name,
    description: course.description,
    classIds: course.classIds || [],
    teacherId: course.teacherId || ''
  }
  showCreateDialog.value = true
}

// 删除课程
const deleteCourse = async (course) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除课程"${course.name}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 这里可以调用后端API删除课程
    ElMessage.success('删除成功')
    await fetchCourses()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 保存课程
const saveCourse = async () => {
  try {
    if (!courseForm.value.name.trim()) {
      ElMessage.warning('请输入课程名称')
      return
    }
    
    if (!courseForm.value.description.trim()) {
      ElMessage.warning('请输入课程描述')
      return
    }
    
    if (!courseForm.value.teacherId) {
      ElMessage.warning('请选择授课教师')
      return
    }
    
    // 这里可以调用后端API保存课程
    if (editingCourse.value) {
      ElMessage.success('更新成功')
    } else {
      ElMessage.success('创建成功')
    }
    
    showCreateDialog.value = false
    editingCourse.value = null
    courseForm.value = { name: '', description: '', classIds: [], teacherId: '' }
    await fetchCourses()
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

onMounted(() => {
  fetchCourses()
  fetchClasses()
  fetchTeachers()
})
</script>

<style scoped lang="scss">
.courses-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header {
  position: relative;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
  padding: 40px 30px;
  margin-bottom: 30px;
  overflow: hidden;
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 15px;
  backdrop-filter: blur(10px);
}

.header-text h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-text p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.5;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.primary-btn {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
}

/* 统计卡片 */
.stats-section {
  padding: 0 30px 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.courses-icon {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.classes-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.teachers-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.students-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 课程列表卡片 */
.courses-list-card {
  margin: 0 30px 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  color: #409eff;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.refresh-btn {
  border-radius: 20px;
  padding: 8px 16px;
}

/* 表格样式 */
.courses-table {
  border-radius: 8px;
  overflow: hidden;
}

.courses-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.courses-table :deep(.el-table__row:hover) {
  background: #f0f9ff !important;
}

.course-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.course-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.course-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-name {
  font-weight: 600;
  color: #303133;
}

.course-code {
  font-size: 12px;
  color: #909399;
  font-family: 'Courier New', monospace;
}

.course-description {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 250px;
}

.description-icon {
  color: #909399;
  margin-top: 2px;
  flex-shrink: 0;
}

.description-text {
  color: #606266;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.teacher-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.teacher-name {
  font-weight: 500;
  color: #303133;
}

.classes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.class-tag {
  border-radius: 12px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.student-count {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.student-icon {
  color: #909399;
}

.count-number {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.count-label {
  color: #909399;
  font-size: 12px;
}

.date-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-icon {
  color: #909399;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  border-radius: 20px;
  padding: 6px 12px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
}

/* 对话框样式 */
.course-dialog {
  border-radius: 16px;
}

.course-dialog :deep(.el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 24px;
}

.course-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.course-dialog :deep(.el-dialog__footer) {
  border-top: 1px solid #ebeef5;
  padding: 20px 24px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.dialog-icon {
  color: #409eff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.submit-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}

/* 表单样式 */
.course-form {
  margin-top: 20px;
}

.form-input :deep(.el-input__wrapper),
.form-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-input :deep(.el-input__wrapper):hover,
.form-select :deep(.el-input__wrapper):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  resize: vertical;
}

.form-textarea :deep(.el-textarea__inner):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #909399;
  font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .header-text h1 {
    font-size: 24px;
  }
  
  .stats-section,
  .courses-list-card {
    margin: 0 20px 20px;
  }
  
  .search-input {
    width: 200px;
  }
  
  .header-right {
    flex-direction: column;
    gap: 10px;
  }
  
  .course-description {
    max-width: 200px;
  }
}
</style>
